<template>
  <div id="professional">
    <div id="professional-box">
      <h1>微专业</h1>
      <p>
        不..是很专业
        <br />
        跟随知名企业的一线资深工程师、设计师,
        <br />
        以及行业知名专家学习，
        <br />
        系统的掌握工作方法和技巧<br />获得全面的职业提升!
      </p>
      <van-button id="micro" @click="jump_list()">更多微专业>></van-button>
    </div>
    <div class="home-video">
      <ul>
        <li>
          <div class="play-ico">
            <van-icon name="play-circle-o" @click="skip()" />
            <p>观看视频介绍</p>
          </div>
        </li>
        <li>
          <div class="play-ico">
            <van-icon name="play-circle-o" @click="skip()" />
            <p>观看视频介绍</p>
          </div>
        </li>
      </ul>
    </div>
    <div id="home-mentor">
      <h3>小葵花微专业导师介绍</h3>
      <ul>
        <li>
          <img src="../../assets/image/kuihua1.jpeg" alt="" />
          <b>贾某</b>
          <p>某大学植物系教授</p>
        </li>
        <li>
          <img src="../../assets/image/kuihua1.jpeg" alt="" />
          <b>贾某</b>
          <p>某大学植物系教授</p>
        </li>
        <li>
          <img src="../../assets/image/kuihua1.jpeg" alt="" />
          <b>贾某</b>
          <p>某大学植物系教授</p>
        </li>
        <li>
          <img src="../../assets/image/kuihua1.jpeg" alt="" />
          <b>贾某</b>
          <p>某大学植物系教授</p>
        </li>
      </ul>
    </div>
    <div id="Moreandmore">
      <h2>选择自己喜欢的职业</h2>
      <ul>
        <li>
          <van-icon class="diamond-ico" name="diamond" />
          <p>设计</p>
        </li>
        <li>
          <van-icon class="diamond-ico" name="diamond" />
          <p>前端</p>
        </li>
        <li>
          <van-icon class="diamond-ico" name="diamond" />
          <p>搬砖</p>
        </li>
        <li>
          <van-icon class="diamond-ico" name="diamond" />
          <p>摸鱼</p>
        </li>
        <li>
          <van-icon class="diamond-ico" name="diamond" />
          <p>复制</p>
        </li>
        <li>
          <van-icon class="diamond-ico" name="diamond" />
          <p>学习</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    skip() {
      this.$router.push({ name: "learner" });
    },
    jump_list() {
      this.$router.push({ name: "list" });
    },
  },
};
</script>

<style lang="scss" scoped>
#professional {
  padding: 0 10px 0 10px;
  #professional-box {
    padding: 30px 10px 0 10px;
    height: 400px;
    background-image: url("../../assets/image/x05.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    line-height: 45px;
    p,
    h1 {
      color: #fff;
    }
  }
  #micro {
    height: 50px;
    width: 200px;
    background-color: #3685c6;
    color: #fff;
    position: absolute;
    bottom: 50px;
    left: 70px;
  }
  .home-video {
    margin-top: 20px;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        height: 100px;
        width: 45%;
        // border: 1px solid #000;
        background-image: url("../../assets/image/x03.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        .play-ico {
          margin-top: 65px;
          color: #fff;
          display: flex;
          margin-left: 3px;
        }
      }
    }
  }
  #home-mentor {
    text-align: center;
    h3 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: normal;
    }
    ul {
      background: #fff;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px 10px;
      li {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        padding-bottom: 20px;
        img {
          border: #3685c6 1px solid;
          border-radius: 50%;
          overflow: hidden;
          max-width: 70%;
          max-height: 70%;
          margin-left: 30px;
          padding-top: 10px;
        }
      }
    }
  }
  #Moreandmore {
    height: 260px;
    width: 375spx;
    background: #3685c6;
    text-align: center;
    color: #fff;
    ul {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 40px 40px;
      li {
        margin-top: 20px;
        .diamond-ico {
          font-size: 45px;
        }
        p {
          font-size: 15px;
        }
      }
    }
  }
}
</style>
